<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <div>hello world</div>

  <script src="./jquery/jquery-3.6.0.min.js"></script>
  <!-- 
        ·使用prop设置和访问元素的固有属性（并注意它们有没有被显示到HTML上） hasOwnProperty
        ·尝试使用prop设置和访问元素的自定义属性（并注意它们有没有被显示到HTML上）
        ·使用attr设置和访问元素的任意属性（并注意它们有没有被显示到HTML上）Attribute
        ·移除prop定义的自定义属性
        ·移除attr定义的自定义属性
        -->
  <script>
    // 尝试使用prop设置和访问元素的自定义属性（被显示到HTML上）
    // $("div").prop("id", "box")
    // console.log( $("div").prop("id") );

    // 尝试使用prop设置和访问元素的自定义属性（没有被显示到HTML上）
    // $("div").prop("fuck","fbox")
    // console.log( $("div").prop("fuck") );

    // 使用attr设置和访问元素的任意属性（都被显示到HTML上）Attribute
    // $("div").attr("id", "box")
    // console.log( $("div").attr("id") );

    // $("div").attr("fuck", "fbox")
    // console.log( $("div").attr("fuck") );

    // 通过prop设置的固有属性无法通过removeProp移除
    // $("div").prop("id","box").removeProp("id")
    // console.log( $("div").prop("id") );

    // 只能remove自定义的prop
    // $("div").prop("fuck","box").removeProp("fuck")
    // console.log( $("div").prop("fuck") );

    /* 通过attr设置的固有属性可以被移除 */
    // $("div").attr("id", "box").removeAttr("id")
    // console.log( $("div").attr("id") );

    // // 移除attr定义的自定义属性
    $("div").attr("fuck", "fbox").removeAttr("fuck")
    console.log($("div").attr("fuck"));
  </script>
</body>

</html>